<!DOCTYPE html>
<html lang="en">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!--<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>-->
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../js/jQueryUI/jquery-ui.js"></script>
<script src="../js/jQueryUI/jquery-ui.css"></script>
<script src="../js/jquery.qrcode.min.js"></script>
<link rel="stylesheet" href="../js/bootstrap-select/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="../js/bootstrap-select/js/bootstrap-select.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="../js/bootstrap-select/dist/js/i18n/defaults-*.min.js"></script>


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>设备信息列表</title>
    <style>
        #main-nav {
            margin-left: 1px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a {
            padding: 10px 8px;
            font-size: 12px;
            font-weight: 600;
            color: #4A515B;
            background: #E9E9E9;
            background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
            background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
            border: 1px solid #D5D5D5;
            border-radius: 4px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a > span {
            color: #4A515B;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
            color: #FFF;
        }

        #main-nav.nav-tabs.nav-stacked > li {
            margin-bottom: 4px;
        }

        /*定义二级菜单样式*/
        .secondmenu a {
            font-size: 10px;
            color: #4A515B;
            text-align: center;
        }

        .navbar-static-top {
            background-color: #212121;
            margin-bottom: 5px;
        }

        .navbar-brand {
            background: url('') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 50px;
            color: #fff;
        }
    </style>

</head>
<body>
        <script>
        $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });

            $( "#opener" ).click(function() {
                $( "#dialog" ).dialog( "open" );
            });
        });
    </script>



<div class="navbar navbar-duomi navbar-static-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/device/searchDevice" id="logo">测试设备管理系统
            </a>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li>
                <a href="#logSetting1" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-th-large"></i>
                        设备管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="logSetting1" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="searchDevice"><i class="glyphicon glyphicon-phone"></i>设备列表</a></li>
                        <li><a href="http://www.umeng.com/"><i class="glyphicon glyphicon-globe"></i>友盟数据</a></li>
                        <li><a href="showPieChart"><i class="glyphicon glyphicon-calendar"></i>图表统计</a></li>
                    </ul>

                </li>
                <li>
                    <a href="searchApk">
                        <i class="glyphicon glyphicon-gift"></i>
                        安装包管理
                    </a>
                </li>
                <li>
                    <a href="#logSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-search"></i>
                        质量统计
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="logSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="logMonitoring"><i class="glyphicon glyphicon-eye-open"></i>ELK日志监控</a></li>
                        <li><a href="http://10.37.18.77:8430/index.html"><i class="glyphicon glyphicon-eye-open"></i>APP代码覆盖率</a></li>
                        <li><a href="http://10.37.18.82:8444/index.html"><i class="glyphicon glyphicon-eye-open"></i>平台代码覆盖率</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>PASSPORT日志监控</a></li>
                    </ul>

                </li>
                <li>
                    <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        系统管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        关于系统
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-md-10">

            <div class="container">
                <div>
                    <font size="6">58到家应用商城:</font>
                </div>
                <div class="form-inline">
                    包名:<input id="search_name" name="search_name" class="form-control input-sm" placeholder="">
                    &nbsp;&nbsp;&nbsp;&nbsp;OS:
                    <select id="search_os" name="search_os" class="selectpicker">
                        <option value="all" selected="">全部</option>
                        <option value="1">Android</option>
                        <option value="2">IOS</option>
                    </select>

                    &nbsp;&nbsp;&nbsp;&nbsp;环境:
                    <select id="search_environment" name="search_environment" class="selectpicker">
                        <option value="all" selected="">全部</option>
                        <option value="1">稳定环境</option>
                        <option value="2">A环境</option>
                        <option value="3">B环境</option>
                        <option value="4">C环境</option>
                        <option value="5">沙箱环境</option>
                        <option value="6">线上环境</option>
                        <option value="7">接口环境</option>
                        <option value="8">性能环境</option>
                    </select>

                    <br>
                    所属APP:
                    <select id="search_category" name="search_category" class="selectpicker">
                        <option value="all" selected="">全部</option>
                        <option value="1">到家用户端</option>
                        <option value="2">家政商家端</option>
                        <option value="3">丽人商家端</option>
                        <option value="4">速运司机端</option>
                        <option value="5">学艺商家端</option>
                        <option value="6">速运用户端</option>
                        <option value="7">家政经纪人端</option>
                        <option value="8">保姆商家端</option>
                    </select>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="submit" class="btn btn-success" onclick="queryForm()">查询</button>

                    &nbsp;&nbsp;&nbsp;&nbsp;<button id="addNew" class="btn btn-danger" type="button" onclick="addNew()">新增安装包</button>
                </div>

            </div>
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <table class="table table-striped table-bordered table-hover table-condensed" id="dataTables-example">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>安装包名称</th>
                            <th>版本</th>
                            <th>OS</th>
                            <th>环境</th>
                            <th>所属APP</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="appPackageTable">
                        #set ($i=1)
                        #foreach($package in $packages)
                        <tr>
                            <input id="packageId" type="hidden" value="${package.id}" name="packageId"/>
                           <!-- <input id="QR_url" type="hidden" value="${package.QR_url}"/>-->
                            <td>${i}</td>
                            <td>${package.package_name}</td>
                            <td>${package.package_version}</td>
                            <td>${package.package_os}</td>
                            <td>${package.package_env}</td>
                            <td>${package.package_category}</td>
                            <td>
                                <button id="showQRCode" class="btn btn-primary" type="button" onclick="showQRCode('${package.QR_url}')">查看二维码</button>
                                <button class="btn btn-info" type="button" onclick="downLoad('${package.download_url}')">下载</button>
                            </td>
                        </tr>
                        #set($i=$i+1)
                        #end
                        </tbody>
                    </table>
                </div>
            </div>
    </div>
</div>
        </div>
        <div id="dialog" title="请用手机浏览器扫描该二维码">
           <!-- <img id="QRcode" src="" width="300" height="300" class="img-rounded">-->
            <div id="qr_code"></div>
        </div>

    </div>

</div>
</body>
<script> </script>
<script>

    function queryForm(){
        var search_name=encodeURI($("#search_name").val());
        var search_os=$("#search_os").val();
        var search_environment=$("#search_environment").val();
        var search_category = $("#search_category").val();
        var para='search_name='+search_name+"&search_os="+search_os+"&search_environment="+search_environment+"&search_category="+search_category;
        var PARA = encodeURI(para);
        window.location.replace("/device/searchApk?"+PARA);


    }
    function downLoad(downloadUrl){
        window.location.replace(downloadUrl);
    }

    function loadEditAppPackagePage(id){

        window.location.replace("/device/editApkUI?apkId="+id);
    }

    function addNew(){
        window.location.replace("editApkUI");
    }

</script>
<script>
    function showQRCode(QR_url){
        //$("#QRcode").attr("src",QR_url);

        $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });
            $( "#dialog" ).dialog( "open" );
        });
        $('#qr_code').children('canvas').remove();
        $('#qr_code').qrcode({
            render: "canvas",
            text: QR_url
        });
    }
</script>

</html>
